<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>测试破浪都规划组件</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
      display: grid;
      place-items: center;
    }
    fc-wave-filter {
      --width: 100px;
    }

    /* :defined 选择器会选择到已定义的元素 */
    /* 但却没有 :undefined 这样的选择器 所以只能用 :not() 选择器来配合使用 */
    /* 这个选择器具体是干嘛用的 可以B站搜索：前端学不动 这位up主 */
    /* 找到他的《自定义元素基础篇》在第 17:25 的位置有讲 */
    :not(:defined) {
      display: none;
    }
  </style>
</head>
<body>
  <!-- 需要在<fc-wave-filter>里指定color这个属性 默认为黑色 -->
  <fc-wave-filter color="#047">
    <!-- 在这里(slot里)放入img图片 -->
    <img src="" />
  </fc-wave-filter>

  <script type="module">
    // 从 fancy-components 中引入 FcWaveFilter（波浪滤镜）
    import { FcWaveFilter } from 'https://unpkg.com/fancy-components'
    // new 就相当于全局注册了这个组件，相当于 Vue 的 Vue.component('fc-wave-filter', FcWaveFilter)
    new FcWaveFilter()
  </script>
</body>
</html>